<template>
    <div class="outer-order-page">
      <el-button type="primary" @click="saveAll">保存</el-button>
      <!-- 仓库信息部分 -->
      <br/><br/>
      <el-card title="仓库信息">
        <el-form 
          :model="form" 
          label-width="120px" 
          ref="formRef" 
          :rules="rules"
        >
          <el-row>
            <el-col :span="10">
              <el-form-item label="仓库名称" prop="wareHouseName">
                <el-input v-model="form.wareHouseName" required></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="仓库编号" prop="wareHouseNumber">
                <el-input placeholder="保存后自动生成" disabled v-model="form.wareHouseNumber"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
            <el-form-item label="*所属类别" prop="category">
              <el-input
                  v-model="form.category"
                  :readonly="form.ourRepresentativesInfoFilled"
                  required
                >
                  <template #suffix>
                    <el-button size="mini" @click="openOurRepresentativesDialog">
                      <i class="el-icon-search"></i>
                    </el-button>
                  </template>
                </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
              <el-form-item label="仓库地址">
                <el-input v-model="form.warehouseAddress"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
  
          <el-row>
            <el-col :span="16">
              <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
  
        </el-form>
      </el-card>

  
     <!-- 我方代表选择对话框 -->
     <el-dialog
        v-model="ourRepresentativesDialogVisible"
        width="500px"
        title="我方代表选择"
        append-to-body
      >
        <el-table
          :data="ourRepresentativesList"
          highlight-current-row
          border
          size="small"
          @current-change="handleOurRepresentativesChange"
        >
          <el-table-column type="index" property="wareHouseTypeId" label="序号" />
          <el-table-column property="wareHouseTypeName" label="类别名称" />
        </el-table>
        <template #footer>
          <el-button @click="ourRepresentativesDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="pickOurRepresentatives">确定</el-button>
        </template>
      </el-dialog>
  
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted, nextTick } from 'vue';
  import { ElMessage } from 'element-plus';
  import axios from 'axios';
  import { write, read } from '@/axios/axiosHelper';
  import { useCounterStore } from '@/stores/counter'
  import { useRouter } from 'vue-router';

  const router = useRouter();
  
  const store = useCounterStore();
  
  // 表单验证规则
  const rules = reactive({
    wareHouseName: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
    processType: [{ required: true, message: '请选择仓库类别', trigger: 'change' }],
    capacityBody: [{ required: true, message: '请选择产能主体', trigger: 'change' }],
    processPerson: [{ required: true, message: '请输入所属类别', trigger: 'blur' }]
  });
  
  // 仓库信息表单数据
  const form = ref({
    wareHouseName: "",
    wareHouseNumber: "",
    warehouseAddress: "",
    category: "",
    remark: ""
  });
    
  
  
  // 表单ref
  const formRef = ref(null);
  
  
  
  // 保存仓库
  const saveAll = async () => {
    axios.post('https://localhost:7279/api/WarehouseManagement/AddWareHouse', form.value).then((res) => {
      if(res.data.code === 100)
      {
        ElMessage.success('保存成功');
        router.push('/GetWareHouse');
      }
      else
      {
        ElMessage.error('保存失败');
      }
    })
  };


  
  // 我方代表列表
  const ourRepresentativesList = ref([]);
  const currentOurRepresentative = ref(null);
  const ourRepresentativesDialogVisible = ref(false);
  
  // 生命周期钩子
  onMounted(() => {
    fetchBaseData();
  });
  
  // 获取基础数据
  const fetchBaseData = () =>{
  // 所属类别
  axios.get('https://localhost:7279/api/WareHouseManagement/GetWareHouseType')
      .then(res => ourRepresentativesList.value = res.data.data || [])
      .catch(error => {
        ElMessage.error('加载我方代表失败');
        console.error(error);
      });
  }
  
  // 打开所属类别对话框
  const openOurRepresentativesDialog = () => {
    if (ourRepresentativesList.value.length === 0) {
      ElMessage.warning('所属类别数据加载中，请稍后重试');
      return;
    }
    ourRepresentativesDialogVisible.value = true;
  };
  
  // 处理所属类别行选中
  const handleOurRepresentativesChange = (val) => {
    currentOurRepresentative.value = val;
  };
  
  // 选择所属类别并填充数据
  const pickOurRepresentatives = () => {
    if (currentOurRepresentative.value) {
      form.value.wareHouseName = currentOurRepresentative.value.wareHouseTypeName+"-";
      form.value.category = currentOurRepresentative.value.wareHouseTypeName;
      form.value.ourRepresentativesInfoFilled = true;
      ourRepresentativesDialogVisible.value = false;
    } else {
      ElMessage.warning('请选择一个我方代表');
    }
  };
  
  
  </script>
  
  <style scoped>
  .outer-order-page {
    padding: 20px;
  }
  
  .table-operations {
    margin: 10px 0 20px;
    display: flex;
    gap: 8px;
  }
  
  .el-form-item {
    margin-bottom: 12px;
  }
  
  .el-table {
    margin-top: 15px;
  }
  
  .el-input__append {
    padding-right: 8px;
  }
  </style>    